<template>
    <div class="layout"> 
         <HeadNav />   

        <div :class="'contianer' + (userInfo.role==='1'?'':' isColumn')">
            <!-- 管理员布局 -->
             <aside :class="'menu'" :style="expand?'':'width:45px'" v-if="userInfo.role ==='1'">
  
                 <div class="menubtn" @click="isExpand"><span :class="'el-icon-caret-'+(expand?'left':'right')"> </span></div>
                 <Menu />
            
                
             </aside>
             <!-- 用户布局 -->
             <aside class="menu_user" v-else>
                      <MenuUser />
             </aside>
              
             <article class="content">
                <router-view></router-view>
             </article>
        </div>
         
    </div>
</template>

<script>
import HeadNav from '../components/HeadNav.vue'
import MenuUser from '../components/Menu_user.vue'
import Menu from '../components/Menu.vue'
import {mapState} from 'vuex'
export default {
  
        data() {
            return {
                expand:true
            }
        },
        methods: {
           isExpand(){
               this.expand = !this.expand;
           }
        },
        computed:{
            ...mapState('login',["userInfo"])
        },
        
        components:{
         HeadNav,
         Menu,
         MenuUser,
              
    }
}
</script>

<style scoped lang="less">
    .layout{
        height: 100%;
    }
    .contianer{
        display: flex;
        min-height: 640px;
 
    }
    .menu{
        width: 150px;
        background: #d8e1f1;
        overflow: hidden;
        transition: all 0.5s ;
        margin-right: 5px;
    }
    .menu_user{
        width: 100%;
    }
    .content{
        flex: 1;
        background: snow;
        padding-top: 5px;
        overflow: hidden;
    }
    .isColumn{
        flex-direction: column;
    }
    .menubtn{
        background: #d8e1f1;
        height: 22px;
        position: relative;
        text-align: center;
        cursor: pointer;
        border-radius: 10px;
        >span{
            line-height: 22px;
            font-size: 25px;
        }
    }

</style>